<template>
  <div id="aMap"></div>
</template>

<script>
import { mapHTUrl } from '../../libs/mapTypeUtil'

export default {
  props: {
    center: {
      type: Array,
      default: () => [42.2222, 123.123123]
    },
    updatePolygins_ht: {
      type: String,
      default: ''
    },
    communityList: {
      type: Array,
      default: () => []
    },
    communityListNew: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      aMap: null,
      url: mapHTUrl()
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      this.$nextTick(() => {
        try {
          if (this.aMap !== undefined && this.aMap !== null) {
            this.aMap && this.aMap.remove()
          }
          var aMap = L.map('aMap', {
            crs: L.CRS.EPSG4326,
            center: [this.center[0], this.center[1]],
            zoom: 15,
            minZoom: 9,
            trackResize: true
          })
          this.aMap = aMap
          L.supermap.tiledMapLayer(this.url).addTo(aMap)

          // 捕捉绘制控件参数设置
          var options = {
            position: 'topright',
            drawMarker: false, // 添加标点
            drawCircleMarker: false, // 添加圆形标点
            drawCircle: false, // 绘制圆形区域
            drawRectangle: false, // 添加按钮绘制矩形
            drawPolyline: false, // 绘制折线
            drawPolygon: false, // 绘制多边形区域
            drawSingleline: false, // 绘制线段
            editPolygon: false, // 编辑图层区域
            deleteLayer: false, // 删除图层
            cutPolygon: false, // 添加一个按钮以删除多边形里面的部分内容
            drawText: false,
            editControls: false
          }
          // 添加捕捉绘制控件
          aMap.pm.addControls(options)

          // 不可编辑 紫色
          let nearbyArr = []
          let arr = []
          nearbyArr = this.communityList.map((i) => {
            let p = []
            if (this.updatePolygins_ht !== i.csc_mapjson_ht) {
              JSON.parse(i.csc_mapjson_ht || '[[0,0]]').forEach(d => {
                p.push([d[0], d[1]])
              })
            }
            return p
          })
          nearbyArr.forEach(i => {
            L.polygon([i], { color: '#cb62f7', weight: 2, fillColor: '#dac0e6', fillOpacity: 0.3 }).addTo(aMap)
          })

          // 绿色
          if (this.communityListNew.length > 0) {
            // 不可编辑
            let nearbyArr = []
            nearbyArr = this.communityListNew.map((i) => {
              let p = []
              if (this.updatePolygins_ht !== i.csc_mapjson_ht) {
                JSON.parse(i.csc_mapjson_ht || '[[0,0]]').forEach(d => {
                  p.push([d[0], d[1]])
                })
              }
              return p
            })
            nearbyArr.forEach(i => {
              L.polygon([i], { color: '#55a76b', weight: 2, fillOpacity: 0.3 }).addTo(aMap)
            })
          }

          // 可编辑
          // console.log(this.updatePolygins_ht, 'updatePolygins_ht')
          let d = JSON.parse(this.updatePolygins_ht)
          d.forEach((i) => {
            arr.push([i[0], i[1]])
          })
          let s = L.polygon(arr, { weight: 2, fillOpacity: 0.3 }).addTo(aMap)
          s.pm.enable({
            allowSelfIntersection: false
          })

          s.on('pm:edit', e => {
            console.log('target11111', e.layer.toGeoJSON())
            let newpath = []
            e.layer.toGeoJSON().geometry.coordinates[0].forEach(item => {
              newpath.push([item[1], item[0]])
            })
            // e.target._latlngs[0].forEach(item => {
            //   newpath.push([item.lat, item.lng])
            // })
            this.$emit('setHtMapJson', JSON.stringify(newpath))
            // console.log(this.csc_mapjson_ht)
          })
          // L.marker([41.6703903668, 123.3858172845], {}).addTo(this.aMap)
        //   let arrCreate = []
        //   s.getLatLngs()[0].forEach(i => {
        //     arrCreate.push([i.lat, i.lng])
        //   })
        //   if (this.create) this.csc_mapjson_ht = JSON.stringify(arrCreate)

          // .bindPopup("I am a polygon.");
          // 为点击地图的事件 增加popup
          // var popup = L.popup()
          // function onMapClick (e) {
          //   popup
          //     .setLatLng(e.latlng)
          //     .setContent('You clicked the map at ' + e.latlng.toString())
          //     .openOn(aMap)
          // }
          // aMap.on('click', onMapClick)
        } catch (err) {
          console.log(err)
        }
      })
    }
  }
}
</script>
<style  scoped>
#aMap {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
/deep/ .leaflet-top{
  top: 85%;
}
</style>
